<template>
  <div class="smart-filter small">
    <div class="filter-text">
      <i class="el-icon-search"></i>
      <span>筛选搜索</span>
    </div>
    <div class="filter-list" v-if="list && list.length">
      <el-form ref="form" inline :model="formData" label-width="140px">
        <div class="filter-item" v-for="(item, index) in list" :key="index">
          <el-form-item :label="item.label">
            <el-input v-if="item.type === 'text'" v-model="formData[item.key]" :placeholder="item.placeholder || item.label" clearable></el-input>
            <el-select
              v-else-if="item.type === 'select'"
              v-model="formData[item.key]"
              :placeholder="item.placeholder || item.label"
              clearable
              @visible-change="visible => visibleChange(visible, index)"
            >
              <el-option
                v-for="item in formOptions[item.key]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="filter-btn">
      <el-button
        @click="handleReset"
        size="small">
        重置
      </el-button>
      <el-button
        type="primary"
        @click="handleSearch"
        size="small">
        查询搜索
      </el-button>
    </div>
  </div>
</template>
<script>
import filterApi from '@/api/selectOption.js'

export default {
  props: {
    list: {
      type: Array,
      default: () => {[]},
    },
    cutEmpty: {
      type: Boolean,
      default: true,
    },
  },
  data () {
    return {
      formData: {},
      formOptions: {},
    }
  },
  created () {
    this.list.forEach(item => {
      let {key, type, defaultValue = ''} = item
      this.$set(this.formData, key, defaultValue)
      if (type === 'select') {
        this.$set(this.formOptions, key, [])
      }
    })
  },
  methods: {
    getCache (key) {
      const cache = JSON.parse(sessionStorage.getItem(key))
      return cache
    },
    visibleChange (visible, index) {
      if (visible) {
        const {key, action, cacheKey} = this.list[index]
        if (!this.formOptions[key].length) {
          // 请求下拉选项
          if (cacheKey) {
            let cacheData = this.getCache(cacheKey)
            if (cacheData) {
              this.formOptions[key] = cacheData
              return
            }
          }
          if (filterApi && filterApi[action]) {
            filterApi[action](cacheKey).then(res => {
              this.formOptions[key] = res
            })
          }
        }
      }
    },
    handleReset () {
      for (const [key] of Object.entries(this.formData)) {
        this.formData[key] = ''
      }
    },
    handleSearch () {
      let params = JSON.parse(JSON.stringify(this.formData))
      if (!this.cutEmpty) {
        this.$emit('setFilter', params)
      } else {
        for (const [key, val] of Object.entries(params)) {
          if ([undefined, '', null].includes(val)) {
            delete params[key]
          }
        }
        this.$emit('setFilter', params)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.smart-filter{
  border: 1px solid #EBEEF5;
  background-color: #FFF;
  color: #303133;
  border-radius: 4px;
  padding: 16px;
  .filter-text{
    padding-bottom: 12px;
  }
  .filter-list{
    .el-form{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .filter-item{
        .el-form-item{
          margin-bottom: 12px;
        }
      }
    }
  }
  .filter-btn{
    text-align: right;
    padding-right: 6px;
  }
}
.smart-filter.small{
  /deep/ .el-input__inner{
    height: 28px;
    line-height: 28px;
  }
}
</style>
